<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		
		<title>mustdos</title>
		
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
		<link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" />
		<link rel="stylesheet" href="css/custom.css" />
		
		<script type="text/javascript" charset="utf-8" src="js/cordova-2.9.0.js"></script>
		<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
	   	<script type="text/javascript" src="js/jquery.mobile-1.3.1.min.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/library.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/common.js"></script>
		
		<script type="text/javascript">	
			
		    var pictureSource;   // picture source
		    var destinationType; // sets the format of returned value 

		    // Wait for PhoneGap to connect with the device
		    document.addEventListener("deviceready",onDeviceReady,false);

		    function onDeviceReady() {
		        pictureSource=navigator.camera.PictureSourceType;
		        destinationType=navigator.camera.DestinationType;
		    }
					
			function saveMustDo(source){
				alert("Please Upload your picture!!");
				getPhoto(source);
		 	}
			
			function getPhoto(source) {
			      // Retrieve image file location from specified source
			      navigator.camera.getPicture(uploadPhoto, onFail, { quality: 10, 
			        destinationType: destinationType.FILE_URI,
			        sourceType: source });
			    }
		    
		    function uploadPhoto(imageURI) {
		        var options = new FileUploadOptions();
		        options.fileKey="file";
		        options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1)+'.jpg';
		        options.mimeType="text/plain";
		        options.headers = {
		        	    Connection: "close"
		        };

		        var params = new Object();
		        
		        params.text = $("#mustdo_text").val();

		        options.params = params;

		        $.mobile.loadingMessage = "Loading...";
			 	$.mobile.loading('show');
			 	
			 	//alert("uploading to: " + appURL + "/saveMustDo.php");
		        
		        var ft = new FileTransfer();
		        ft.upload(imageURI, encodeURI(appURL + "/saveMustDo.php"), success, onError, options);
		    }

		    function success(r) {
		    	$.mobile.loading('hide');
		    	alert("Thanks!!");
		        //alert("Code = " + r.responseCode);
		        //alert("Response = " + r.response);
		        //alert("Sent = " + r.bytesSent);
		    }

		    function onError(error) {
		    	$.mobile.loading('hide');
		        alert("An error has occurred: Code = " + error.code);
		        alert("upload error source " + error.source);
		        alert("upload error target " + error.target);
		    }

		    function onFail(error) {
		    	$.mobile.loading('hide');
		        alert("An error has occurred: Code = " + error.code);
		        alert("upload error source " + error.source);
		        alert("upload error target " + error.target);
		    }
			
		 </script>
	</head>
<body style="text-align:center;">

<div  data-role="page" id="write"> 
	<div  data-role="header"><img src="images/img-logo.jpg" height="80" width="80"/></div> 
	<div  data-role="content">
		<table style="width: 100%">
			<tr><td><div class="errorMsg" id="errorMsg"></div></td></tr>
			<tr>
				<td>
					Tell us what you must do before you die!
				</td>
			</tr>
			<tr>
				<td>			
					&nbsp;
				</td>
			</tr>
			<tr>
				<td>		
					<textarea style="width:100%; height: 200px;" id="mustdo_text">aaaaaaaaaaaaa aaaaaa aaaa aaaaaaa</textarea>
				</td>
			</tr>
			<tr>
				<td>	
					<button onclick="saveMustDo(pictureSource.PHOTOLIBRARY);">Save MustDo</button>	
				</td>
			</tr>
			<tr>
				<td>		
					<button onclick="window.location.href='list.html'">Other People's Musts</button>
				</td>
			</tr>
		</table>
	</div> 
	<div  data-role="footer" data-position="fixed">
		<button class="button-main-small" onclick="exitAPP();">Exit</button>
	</div>
</div>
</body>
</html>